import React, { FC, useEffect, useState } from 'react';
import styles from './NavComponent.less';

interface NavComponentProps {}

type NavItem = {
  name: string;
  url: string;
  openNewWin: boolean;
};

const NavComponent: FC<NavComponentProps> = (props) => {
  const { children } = props;

  const [navArr, setNavArr] = useState<NavItem[]>(() => {
    const tempArr: NavItem[] = [
      {
        name: '小米商城',
        url: 'http://www.mi.com/',
        openNewWin: false,
      },
      {
        name: 'MIUI',
        url: 'http://www.mi.com/',
        openNewWin: true,
      },
      {
        name: 'IoT',
        url: 'http://www.mi.com/',
        openNewWin: true,
      },
      {
        name: '云服务',
        url: 'http://www.mi.com/',
        openNewWin: true,
      },
      {
        name: '天星数科',
        url: 'http://www.mi.com/',
        openNewWin: true,
      },
      {
        name: '有品',
        url: 'http://www.mi.com/',
        openNewWin: true,
      },
      {
        name: '小爱开放平台',
        url: 'http://www.mi.com/',
        openNewWin: true,
      },
      {
        name: '企业团购',
        url: 'http://www.mi.com/',
        openNewWin: true,
      },
      {
        name: '资质证照',
        url: 'http://www.mi.com/',
        openNewWin: true,
      },
      {
        name: '协议规则',
        url: 'http://www.mi.com/',
        openNewWin: true,
      },
      {
        name: '下载app',
        url: 'http://www.mi.com/',
        openNewWin: true,
      },
      {
        name: '智能生活',
        url: 'http://www.mi.com/',
        openNewWin: true,
      },
      {
        name: 'Select Location',
        url: 'http://www.mi.com/',
        openNewWin: true,
      },
    ];
    return tempArr;
  });

  useEffect(() => {
    console.log('NavComponent 组件挂载完毕!');
  }, []);

  const buildNav = () => {
    return navArr.map((item, idx) => {
      const target = item.openNewWin ? '_blank' : '_self';
      if (idx === 0) {
        return (
          <a key={idx} href={item.url} target={target}>
            {item.name}
          </a>
        );
      } else {
        return (
          <React.Fragment key={idx}>
            <span></span>
            <a href={item.url} target={target}>
              {item.name}
            </a>
          </React.Fragment>
        );
      }
    });
  };

  console.log('NavComponent 组件render!');
  return (
    <div className={styles.container}>
      <div className={styles.panel}>
        <div className={styles.leftPanel}>{buildNav()}</div>
        <div className={styles.rightPanel}>
          <a>登录</a>
          <span></span>
          <a>注册</a>
          <span></span>
          <a>消息通知</a>
          <a>购物车(0)</a>
        </div>
      </div>
    </div>
  );
};

export default NavComponent;
